<template>
  <div id="app-container">
    <el-card>
      <div ref="myChartRef" style="width: 600px; height: 400px;"></div>
    </el-card>
  </div>
</template>
<script lang="ts" setup name="ElCard">
import * as echarts from 'echarts';
import {ElCard} from 'element-plus';
import {onMounted, ref} from "vue";


const myChartRef = ref(null);

const option = {
  title: {
    text: 'ECharts 折线图示例'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销量',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
}

const initChart = () => {
  if (myChartRef.value !== null) {
    const myChart = echarts.init(myChartRef.value);
    myChart.setOption(option);
  }
};

onMounted(() => {
  initChart();
})


</script>

<style scoped lang="scss">

</style>
